<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style type="text/css">
            @page {
                size: auto
            }
        </style>
        <title>Bounded Context Canvas</title>
    </head>
    <body>
        <header>
            <h1>Bounded Context Canvas (v3)</h1>
        </header>
        <main class="container-fluid">
            <form>
                <div class="row">
                    <div class="col border-right">
                        <div class="form-group">
                            <label for="name" class="font-weight-bolder">Name</label>
                            <input tabindex="1" type="text" class="form-control" id="name" aria-describedby="nameHelp">
                        </div>
                        <hr/>
                        <div class="form-group">
                            <label for="description" class="font-weight-bolder">Description</label>
                            <textarea tabindex="2" class="form-control" id="description" rows="2" aria-describedby="description-help"></textarea>
                            <small id="description-help" class="form-text text-muted">Summary of purpose and responsibilities</small>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col">
                                <p class="font-weight-bolder text-center">BC Classification</p>
                                <div class="form-check">
                                    <input tabindex="3" class="form-check-input" type="radio" name="domain" id="domain-radios-1" value="core">
                                    <label class="form-check-label" for="domain-radios-1">Core</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="domain" id="domain-radios-2" value="supporting">
                                    <label class="form-check-label" for="domain-radios-2">Supporting</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="domain" id="domain-radios-3" value="generic">
                                    <label class="form-check-label" for="domain-radios-3">Generic</label>
                                </div>
                            </div>
                            <div class="col">
                                <p class="font-weight-bolder text-center">Business Model</p>
                                <div class="form-check">
                                    <input tabindex="4" class="form-check-input" type="radio" name="business-model" id="business-model-radios-1" value="revenue">
                                    <label class="form-check-label" for="business-model-radios-1">Revenue</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="business-model" id="business-model-radios-2" value="engagement">
                                    <label class="form-check-label" for="business-model-radios-2">Engagement</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="business-model" id="business-model-radios-3" value="compliance">
                                    <label class="form-check-label" for="business-model-radios-3">Compliance</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="business-model" id="business-model-radios-4" value="cost-reduction">
                                    <label class="form-check-label" for="business-model-radios-4">Cost reduction</label>
                                </div>
                            </div>
                            <div class="col">
                                <p class="font-weight-bolder text-center">Evolution</p>
                                <div class="form-check">
                                    <input tabindex="5" class="form-check-input" type="radio" name="evolution" id="evolution-radios-1" value="genesis">
                                    <label class="form-check-label" for="evolution-radios-1">Genesis</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="evolution" id="evolution-radios-2" value="custom-built">
                                    <label class="form-check-label" for="evolution-radios-2">Custom built</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="evolution" id="evolution-radios-3" value="product">
                                    <label class="form-check-label" for="evolution-radios-3">Product</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="evolution" id="evolution-radios-4" value="commodity">
                                    <label class="form-check-label" for="evolution-radios-4">Commodity</label>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <div class="form-group">
                            <label for="business-decisions" class="font-weight-bolder">Business Decisions</label>
                            <textarea tabindex="6" class="form-control" id="business-decisions" rows="5" aria-describedby="business-decisions-help"></textarea>
                            <small id="business-decisions-help" class="form-text text-muted">Key business rules, policies and decisions</small>
                        </div>
                        <hr/>
                        <div class="form-group">
                            <label for="ubuquitous-language" class="font-weight-bolder">Ubiquitous Language</label>
                            <textarea tabindex="7" class="form-control" id="ubuquitous-language" rows="5" aria-describedby="ubiquitous-language-help"></textarea>
                            <small id="ubiquitous-language-help" class="form-text text-muted">Key domain terminology</small>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="model-traits" class="font-weight-bolder">Model traits</label>
                            <input tabindex="8" type="text" class="form-control" id="model-traits" aria-describedby="model-traits-help">
                            <small id="model-traits-help" class="form-text text-muted">draft, execute, audit, enforcer, interchange, gateway, etc.</small>
                        </div>
                        <hr/>
                        <div>
                            <p class="font-weight-bolder">Messages Consumed and Produced</p>
                            <div class="row">
                                <div class="col border-right">
                                    <p class="text-center">Messages Consumed</p>
                                    <div class="form-group">
                                        <label for="commands-handled">Commands handled</label>
                                        <textarea tabindex="9" class="form-control text-monospace" id="commands-handled" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="commands-handled">Events handled</label>
                                        <textarea tabindex="10" class="form-control text-monospace" id="events-handled" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="commands-handled">Queries handled</label>
                                        <textarea tabindex="11" class="form-control text-monospace" id="queries-handled" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col">
                                    <p class="text-center">Messages Produced</p>
                                    <div class="form-group">
                                        <label for="commands-sent">Commands sent</label>
                                        <textarea tabindex="12" class="form-control text-monospace" id="commands-sent" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="events-published">Events published</label>
                                        <textarea tabindex="13" class="form-control text-monospace" id="events-published" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="queries-invoked">Queries invoked</label>
                                        <textarea tabindex="14" class="form-control text-monospace" id="queries-invoked" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <div>
                            <p class="font-weight-bolder">Dependencies and Relationships</p>
                            <div class="row">
                                <div class="col border-right">
                                    <p class="text-center">Message Suppliers</p>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label>Name</label>
                                                <input tabindex="15" type="text" class="form-control" id="supplier-relationship-name-1">
                                                <input tabindex="17" type="text" class="form-control" id="supplier-relationship-name-2">
                                                <input tabindex="19" type="text" class="form-control" id="supplier-relationship-name-3">
                                                <input tabindex="21" type="text" class="form-control" id="supplier-relationship-name-4">
                                                <input tabindex="23" type="text" class="form-control" id="supplier-relationship-name-5">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label>Relationship</label>
                                                <input tabindex="16" type="text" class="form-control" id="supplier-relationship-1">
                                                <input tabindex="18" type="text" class="form-control" id="supplier-relationship-2">
                                                <input tabindex="20" type="text" class="form-control" id="supplier-relationship-3">
                                                <input tabindex="22" type="text" class="form-control" id="supplier-relationship-4">
                                                <input tabindex="24" type="text" class="form-control" id="supplier-relationship-5">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <p class="text-center">Message Consumers</p>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label>Name</label>
                                                <input tabindex="25" type="text" class="form-control" id="consumer-relationship-name-1">
                                                <input tabindex="27" type="text" class="form-control" id="consumer-relationship-name-2">
                                                <input tabindex="29" type="text" class="form-control" id="consumer-relationship-name-3">
                                                <input tabindex="31" type="text" class="form-control" id="consumer-relationship-name-4">
                                                <input tabindex="33" type="text" class="form-control" id="consumer-relationship-name-5">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label>Relationship</label>
                                                <input tabindex="26" type="text" class="form-control" id="consumer-relationship-1">
                                                <input tabindex="28" type="text" class="form-control" id="consumer-relationship-2">
                                                <input tabindex="30" type="text" class="form-control" id="consumer-relationship-3">
                                                <input tabindex="32" type="text" class="form-control" id="consumer-relationship-4">
                                                <input tabindex="34" type="text" class="form-control" id="consumer-relationship-5">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <small id="dependenciesHelp" class="form-text text-muted">Relationship : mutually dependant, upstream/downstream, indepedant</small>
                            <small id="relationships-help" class="form-text text-muted">ACL: Anti-Corruption Layer - OHS: Open Host Service - PL: Published Language</small>
                        </div>
                    </div>
                </div>
            </form>
        </main>
        <footer>
            <article>
                <section>
                    <p>Source <a tabindex="35" href="https://medium.com/nick-tune-tech-strategy-blog/bounded-context-canvas-v2-simplifications-and-additions-229ed35f825f" target="-blank" rel="noopener noreferrer">Nick Tune - Modelling Bounded Contexts with the Bounded Context Canvas: A Workshop Recipe</a></p>
                </section>
            </article>
        </footer>
    </body>
</html>
